<template>
  <div>
    <div class="simple"></div>
    <p>proxy双向绑定</p>
    <div id="bind">
      <label for="txt">文本框</label><input type="text" id="txt" />
      <p id="showTxt"></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProxyBind",
  mounted() {
    let obj = {};
    const input = document.getElementById("txt");
    const p = document.getElementById("showTxt");
    let proxy = new Proxy(obj, {
      get(target, property, receiver) {
        return Reflect.get(target, property, receiver);
      },
      set(target, property, value, receiver) {
        input.value = value;
        p.innerHTML = value;
        return Reflect.set(target, property, value, receiver);
      }
    });
    input.addEventListener("keyup", e => {
      proxy.text = e.target.value;
    });
  }
};
</script>

<style scoped></style>
